<script lang="ts">
	import type { PageData } from './$types'
	import { goto } from '$app/navigation'

	import {
		Tabs,
		TabItem,
		Table,
		TableBody,
		TableBodyCell,
		TableBodyRow,
		TableHead,
		TableHeadCell,
		TableSearch,
	} from 'flowbite-svelte'
	import {
		UserCircleSolid,
		GridSolid,
		AdjustmentsVerticalSolid,
		ClipboardSolid,
	} from 'flowbite-svelte-icons'
	import type { Security } from '$lib/bindings'

	export let data: PageData
	let searchTerm = ''
	let hoveredRowIndex: number | null = null

	function handleRowHover(index: number) {
		hoveredRowIndex = index
	}

	function handleRowUnhover() {
		hoveredRowIndex = null
	}

	function click_row(e: any, security: Security): any {
		console.log('click_row on security: ', security.id?.id.String)
		let target = e.target as Element
		if (target.closest('a')) return // If the click was originated from a button, do nothing (or handle accordingly)
		goto(`/securities/${security.id?.id.String}`)
	}

	function goToPage(page: number) {
		goto(`/securities?page=${page + 1}`)
	}
</script>

<div class="bg-gray-200 w-full h-svh overflow-y-auto">
	<Tabs style="underline" contentClass="p-0 bg-gray-50  dark:bg-gray-800 mt-0">
		<TabItem open>
			<div slot="title" class="flex items-center gap-2">
				<UserCircleSolid size="sm" />
				All Securities
			</div>
			<div class="overflow-auto w-full h-full flex flex-col">
				<div class="flex px-4 py-1">
					{#if data.currentPage > 0}
						<button
							on:click={() => goToPage(data.currentPage - 1)}
							class="px-2 uppercase bg-blue-400"
						>
							Prev
						</button>
					{:else}
						<button class="px-2 uppercase bg-gray-400"> Prev </button>
					{/if}

					<button
						on:click={() => goToPage(data.currentPage + 1)}
						class="px-2 uppercase bg-red-400 mx-8"
					>
						Next
					</button>
				</div>
				<TableSearch
					placeholder="Search by maker name"
					hoverable={true}
					bind:inputValue={searchTerm}
				>
					<TableHead defaultRow={false}>
						<tr
							class="bg-gray-400 text-center text-xs font-medium text-gray-900 uppercase sticky top-0 z-10"
						>
							<TableHeadCell padding="pr-2" class="text-nowrap sticky left-0 top-0 bg-gray-400">
								序号
							</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">证券代码</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">证券名称</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">类型</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">市场</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">最新价</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">涨跌幅</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">涨跌额</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">成交量(手)</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">成交额</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">振幅</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">最高</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">最低</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">今开</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">昨收</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">量比</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">换手率</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">市盈率(动态)</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">市净率</TableHeadCell>
							<TableHeadCell padding="pr-2" class="text-nowrap">指标得分</TableHeadCell>
							<TableHeadCell colspan="4">Ops</TableHeadCell>
						</tr>
					</TableHead>
					<TableBody tableBodyClass="divide-y divide-slate-200">
						{#each data.securities as security, index (security.id?.id.String)}
							<TableBodyRow
								class="divide-x divide-slate-200 hover:bg-green-400"
								tabindex={index}
								on:mouseover={() => handleRowHover(index)}
								on:focus={() => handleRowHover(index)}
								on:mouseout={() => handleRowUnhover()}
								on:blur={() => handleRowUnhover()}
								on:click={(e) => click_row(e, security)}
								id={security.id?.id.String}
							>
								<TableBodyCell class=" text-gray-900 whitespace-nowrap sticky left-0 bg-gray-200">
									{data.currentPage * data.pageSize + index}
								</TableBodyCell>
								<TableBodyCell>{security.symbol}</TableBodyCell>
								<TableBodyCell>{security.name}({security.id?.id.String})</TableBodyCell>
								<TableBodyCell>{security.type_}</TableBodyCell>
								<TableBodyCell>{security.market}</TableBodyCell>
								<TableBodyCell>0</TableBodyCell>
								<TableBodyCell>0</TableBodyCell>
								<TableBodyCell>0</TableBodyCell>
								<TableBodyCell>0</TableBodyCell>
								<TableBodyCell>0</TableBodyCell>
								<TableBodyCell>0</TableBodyCell>
								<TableBodyCell>0</TableBodyCell>
								<TableBodyCell>0</TableBodyCell>
								<TableBodyCell>0</TableBodyCell>
								<TableBodyCell>0</TableBodyCell>
								<TableBodyCell>0</TableBodyCell>
								<TableBodyCell>0</TableBodyCell>
								<TableBodyCell>0</TableBodyCell>
								<TableBodyCell>0</TableBodyCell>
								<TableBodyCell>0</TableBodyCell>

								<TableBodyCell class="text-center">
									<a
										class="px-1 text-blue-600 underline"
										href="/securities/linechart/${security.id?.id.String}/DAYx121"
									>
										日线图
									</a>
								</TableBodyCell>

								<TableBodyCell>
									<a
										class="px-1 text-blue-600 underline"
										href="/securities/pointchart/${security.id?.id.String}/DAYx121"
									>
										点数图
									</a>
								</TableBodyCell>
								<TableBodyCell>
									<a
										class="px-1 text-blue-600 underline"
										href="/securities/indicators/${security.id?.id.String}/DAYx121"
									>
										相关指标
									</a>
								</TableBodyCell>
								<TableBodyCell>
									<a class="px-1 text-blue-600 underline" href="/tbots/${security.id?.id.String}|">
										TBots
									</a>
								</TableBodyCell>
							</TableBodyRow>
						{/each}
						<TableBodyRow>
							<TableBodyCell colspan="21">Bottom Line-----</TableBodyCell>
						</TableBodyRow>
					</TableBody>
				</TableSearch>
			</div>
		</TabItem>
		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<GridSolid size="sm" />
				Stocks
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400 max-h-48">
				<b>Stocks:</b>
				{#each Array.from({ length: 30 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>
		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<GridSolid size="sm" />
				Etfs
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400 max-h-48">
				<b>Etfs:</b>
				{#each Array.from({ length: 30 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>
		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<GridSolid size="sm" />
				Open Funds
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400 max-h-48">
				<b>Open Funds:</b>
				{#each Array.from({ length: 30 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>
		<TabItem>
			<div slot="title" class="flex items-center gap-2">
				<GridSolid size="sm" />
				Convertible Bonds
			</div>
			<p class="text-sm text-gray-500 dark:text-gray-400 max-h-48">
				<b>Convertible Bonds:</b>
				{#each Array.from({ length: 30 }, (_, i) => i) as number}
					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
					ut labore et dolore magna aliqua. {number}<br />
				{/each}
			</p>
		</TabItem>
	</Tabs>
</div>
